import 'package:flutter/material.dart';

class ButtonsPage extends StatefulWidget {
  @override
  _ButtonsPageState createState() => _ButtonsPageState();
}

class _ButtonsPageState extends State<ButtonsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {},
          )
        ],
      ),
      // 浮动按钮
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.cloud_upload,color: Colors.black,size: 34,),
        backgroundColor: Colors.green,
        onPressed: (){},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('普通按钮'),
                onPressed: () {
                  print('普通按钮');
                },
              ),
              SizedBox(
                width: 10,
              ),
              RaisedButton(
                child: Text('颜色按钮'),
                color: Colors.green,
                textColor: Colors.white,
                onPressed: () {
                  print('颜色按钮');
                },
              ),
              SizedBox(
                width: 10,
              ),
              RaisedButton(
                child: Text('阴影按钮'),
                color: Colors.green,
                textColor: Colors.white,
                elevation: 20,
                // 阴影
                onPressed: () {
                  print('阴影按钮');
                },
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton.icon(
                icon: Icon(Icons.search),
                label: Text('图标按钮'),
                color: Colors.green,
                textColor: Colors.white,
                elevation: 20,
                // 阴影
                onPressed: () {
                  print('图标按钮');
                },
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 200,
                height: 50,
                child: RaisedButton(
                  child: Text('设置按钮宽高'),
                  color: Colors.orange,
                  textColor: Colors.white,
                  // 阴影
                  elevation: 20,
                  onPressed: () {
                    print('设置按钮宽高');
                  },
                ),
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  width: 200,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  child: RaisedButton(
                    child: Text('自适应按钮'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    // 阴影
                    elevation: 20,
                    onPressed: () {
                      print('自适应按钮');
                    },
                  ),
                ),
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('圆角按钮'),
                color: Colors.blue,
                textColor: Colors.white,
                // 阴影
                elevation: 20,
                shape: RoundedRectangleBorder(
                  // 圆角
                  borderRadius: BorderRadius.circular(20),
                ),
                onPressed: () {
                  print('圆角按钮');
                },
              ),
              SizedBox(
                width: 10,
              ),
              Container(
                width: 90,
                height: 90,
                child: RaisedButton(
                  child: Text('圆形按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  // 阴影
                  elevation: 20,
                  splashColor: Colors.red,
                  // 水波纹颜色
                  shape: CircleBorder(
                    // 圆角
                    side: BorderSide(color: Colors.white),
                  ),
                  onPressed: () {
                    print('圆形按钮');
                  },
                ),
              ),
              SizedBox(
                width: 10,
              ),
              FlatButton(
                child: Text('扁平按钮'),
                textColor: Colors.red,
                onPressed: () {},
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  padding: EdgeInsets.all(10),
                  height: 70,
                  child: OutlineButton(
                    child: Text('边框按钮'),
                    textColor: Colors.pink,
                    onPressed: () {},
                  ),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    child: Text('我俩属于ButtonBar'),
                    onPressed: () {},
                  ),
                  RaisedButton(
                    child: Text('我俩属于ButtonBar'),
                    onPressed: () {},
                  )
                ],
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              MyButton('自定义按钮组件',
                  color: Colors.red,
                  textColor: Colors.white,
                  pressed: () {
                    print('aaaa');
                  },
                  width: 150,
                height: 60,
              )
            ],
          )
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  String text = '默认文字';
  final color;
  final textColor;
  final double width;
  final double height;
  final pressed;

  MyButton(this.text,
      {this.color, this.textColor, this.width, this.height, this.pressed});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.width,
      height: this.height,
      child: RaisedButton(
        child: Text(this.text),
        color: this.color,
        textColor: this.textColor,
        onPressed: this.pressed,
      ),
    );
  }
}
